<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成基于 JSON 数据的 HTML 下拉列表</title>
</head>

<body>
    <h2>做一个基于 JSON 数据的下拉列表。</h2>
    <p id="demo"></p>
    <script>
        var obj, dbParam, xmlhttp, myObj, x, txt = "";
        obj = { table: "customers", limit: 20 };
        dbParam = JSON.stringify(obj);
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                myObj = JSON.parse(this.responseText);
                txt += "<select>"
                for (x in myObj) {
                    txt += "<option>" + myObj[x].name;
                }
                txt += "</select>"
                document.getElementById("demo").innerHTML = txt;
            }
        };
        xmlhttp.open("POST", "json_demo_db_post.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("x=" + dbParam);
    </script>
</body>

</html>